<template>
  <xoFormItem class="w-full" :label="props.label" :tips="props.tips" :ruleMessage="props.ruleMessage">
    <template #header>
      <slot name="header"></slot>
    </template>
    <xoNumberInput class="w-full" v-model.number="model" :min="props.min" :max="props.max"
      :minWarning="props.minWarning" :maxWarning="props.maxWarning" :step="props.step" />
    <template #footer>
      <slot name="footer"></slot>
    </template>
  </xoFormItem>

</template>

<script setup lang='ts'>

import xoFormItem from './xoFormItem.vue';
import xoNumberInput from './xoNumberInput.vue';

interface IProps {
  label?: string,
  tips?: string,
  min?: number,
  minWarning?: string,
  max?: number,
  maxWarning?: string,
  step?: number
  ruleMessage?: string,
}

const props = withDefaults(defineProps<IProps>(), {
  label: '',
  min: 0,
  minWarning: '不能减少',
  max: 100,
  maxWarning: '不能增加',
  step: 1,
  ruleMessage: '',
})

const model = defineModel<number>()


</script>

<style></style>